<!DOCTYPE html>
<html>

<body>
<!--定义画布容器，给个边框省的你们找不到-->
<canvas id="myCanvas" width="400" height="400" style="border:1px solid #d3d3d3;">
    Your browser does not support the HTML5 canvas tag.
</canvas>

<div style="display: flex;width: 500px;height: 500px;background-color: #01f2fe">
<!--    <canvas width="300px">-->
<!--    </canvas>-->
    <div class="progress-bar-container">
        <div class="progress-bar" id="progress-bar"></div>
        <span class="progress-text" id="progress-text">0%</span>
    </div>
</div>





<script>
    function updateProgressBar(percentage) {
        var progressBar = document.getElementById('progress-bar');
        var progressText = document.getElementById('progress-text');

        // 更新进度条的宽度
        progressBar.style.width = percentage + '%';

        // 更新显示的文本
        progressText.textContent = percentage + '%';
    }

    // 示例：更新进度到50%
    updateProgressBar(90);
</script>

</body>
<style>
    .progress-bar-container {
        width: 100%;
        height: 20px;
        background-color: #f0f0f0;
        border-radius: 5px;
        position: relative;
        overflow: hidden;
    }

    .progress-bar {
        height: 100%;
        background-color: #007bff;
        width: 0; /* 初始进度为0 */
        transition: width 0.5s ease; /* 平滑过渡效果 */
        animation: processing 1s linear forwards; /* 动画效果 */;
    }
    
    @keyframes processing {
        0% {
            width: 0%;
        }
        100% {
            /*width: 50%;*/
            /*width: 33%;*/
        }
    }

    .progress-text {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: #000;
        font-size: 14px;
    }
</style>
</html>
